import React, { useState, useEffect, useRef } from "react";
import "./index.scss";
import { Button, Modal, Form, Input, Tooltip } from "antd";
import type { FormProps } from "antd";
import { getUp } from '../../request/index'
type FieldType = {
  username?: string;
  password?: string;
  remember?: string;
};
function index() {
  const userimg = localStorage.getItem("userimg");
  // localStorage.setItem("name1", "蜡逼小新");
  localStorage.setItem("ID", "74904270");
  const name1 = localStorage.getItem("name1");
  const ID = localStorage.getItem("ID");
  const name = localStorage.getItem("name");
  localStorage.setItem("emit", "3368493928@qq.com");
  const emit = localStorage.getItem("emit");
  localStorage.setItem("password", "123456");
  const password = localStorage.getItem("password");

  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
    console.log("Success:", values);
    console.log(values.username);

    setIsModalOpen(false);
    localStorage.setItem('name1', values.username)
  };

  const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (
    errorInfo
  ) => {
    console.log("Failed:", errorInfo);
  };

  // 上传
  const input_box = useRef()
  // let [list, setList] = useState([])
  const updata = async () => {
    let files = input_box.current.files;
    if (!files) {
      alert('没有上传')
    } else {
      let formData = new FormData();
      for (let key in files) {
        formData.append('files' + key, files[key])
      }
      let res = await getUp(formData)
      console.log(res.data.arr.join(''));
      // console.log(JSON.stringify(res.data.arr));
      localStorage.setItem('userimg', res.data.arr.join(''))
      window.location.href = window.location.href
    }
  }
  const upUserImg = () => {
    input_box.current.click()
  }
  const fanhuiZhuYe = () => {
    window.location.href = '/'
  }
  return (
    <div className="box">
      <div className="tit">
        <Tooltip title="返回主页">
          <img
            src="src/assets/images/logo.png"
            alt=""
            style={{ margin: "20px 35px", float: "left" }}
            onClick={fanhuiZhuYe}
          />
        </Tooltip>

        <span style={{ lineHeight: "80px" }}>个人中心</span>
      </div>
      <div className="exit">
        <p>
          已有兑换码?点击兑换会员 <span>退出登录</span>{" "}
        </p>
      </div>
      <div className="content">
        <div className="content-top">
          <h4>个人信息</h4>
          <div className="image">
            <img src={userimg} alt="" className="imageimg" />
          </div>
          <p className="upimg" onClick={upUserImg}>上传新头像</p>
          <input type="file" multiple accept='image/*' onChange={updata} ref={input_box} style={{ display: "none" }} />
          <p className="name">
            用户昵称{" "}
            <input type="text" className="input123" placeholder={name1} />
            <span onClick={showModal}>编辑</span>
            <Modal
              title="编辑用户名称"
              open={isModalOpen}
              onOk={handleOk}
              onCancel={handleCancel}
            >
              <Form
                name="basic"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                style={{ maxWidth: 600 }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
              >
                <Form.Item<FieldType>
                  label=""
                  name="username"
                  rules={[
                    { required: true, message: "Please input your name1!" },
                  ]}
                >
                  <Input />
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                  <Button type="primary" htmlType="submit">
                    Submit
                  </Button>
                </Form.Item>
              </Form>
            </Modal>
          </p>
        </div>
        <div className="content-bottom">
          <p className="name">
            用户ID <input type="text" className="input123" placeholder={ID} />
          </p>
        </div>
      </div>

      {/* 账号管理 */}
      <div className="account">
        <h4>账号管理</h4>
        <p className="name">
          手机号 <input type="text" className="input123" placeholder={name} />
          <span className="span1">绑定</span>
        </p>

        <p className="name">
          邮箱 <input type="text" className="input123" placeholder={emit} />
          <span className="span2">绑定</span>
        </p>

        <p className="name">
          密码 <input type="text" className="input123" placeholder={password} />
          <span className="span2">设置</span>
        </p>
      </div>

      {/* 第三方账号管理 */}

      <div className="account1">
        <h4>第三方账号管理</h4>
        <div className="da">
          <img src="" alt="" />
          <input type="text" className="input123" />
          <span>绑定</span>
        </div>

        <div className="da">
          <img src="" alt="" />
          <input type="text" className="input123" />
          <span>绑定</span>
        </div>
      </div>

      <div className="del">
        <p>删除账号</p>
      </div>
    </div>
  );
}

export default index;
